<template>
    <div>
        <h3>AddItem组件</h3>
        <p>已知库存数：{{ $store.state.count }}</p>
        <button @click="addFn">库存+1</button>
        <button @click="asyncAddFn">延迟1S，库存+5</button>
       <p>{{ doubleCount }}</p>
    </div>
</template>

<script>
import { mapState } from 'vuex/dist/vuex.cjs.js';
export default{
    // computed:{
    //     ...mapState('count')
    // }
    methods:{
        addFn(){
            this.$store.commit('addCounts',1)
        },
        asyncAddFn(){
            this.$store.dispatch('asyncAddCount',5)
        },
        doubleFn(){
            this.$store.getters.doubleCount()
        }
    },
    computed:{
        doubleCount(){
            return this.$store.getters.doubleCount
        }
    }
}
</script>

<style>

</style>